<template>
  <div class="edu-page-warp">
    <ConditionCard
            shadow="never"
            body-style="padding: 24px 24px 6px 24px;"
            @search="onSubmit"
            @reset="reset"
    >
      <el-form :model="queryForm" ref="queryForm" label-width="80px">
        <el-row :gutter="40">
          <el-col :span="8">
            <el-form-item label="年级:" >
              <el-date-picker
                  v-model="queryForm.year"
                  value-format="yyyy"
                  type="year"
                  placeholder="选择学年"
                  style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="培养层次:">
              <el-select v-model="queryForm.trainingLevel"  clearable style="width: 100%">
                <el-option
                  v-for="item in options.trainingLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="queryForm.projId*1 !== 1">
            <el-form-item label="培养类别 : ">
              <el-select v-model="queryForm.trainingCategory"  clearable style="width: 100%">
                <el-option
                  v-for="item in options.trainingCategory"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="queryForm.projId*1 !== 1">
            <el-form-item label="学位类型 : ">
              <el-select v-model="queryForm.degreeType"  clearable style="width: 100%">
                <el-option
                  v-for="item in options.degreeType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设置状态 : ">
              <el-select v-model="queryForm.siteType"  clearable style="width: 100%">
                <el-option
                  v-for="item in options.siteType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
        </el-row>
      </el-form>
    </ConditionCard>
    <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
      <!-- <h1 class="condition-title">培养方案模板规则</h1> -->
      <h1 class="condition-title">培养方案选课规则</h1>
      <div class="div-main clearfix">
        <div class="float-left">
          <el-input
            v-model="queryForm.name"
            placeholder="输入模板名称搜索"
            prefix-icon="el-icon-search"
            @keyup.enter.native="onSubmit"
          ></el-input>
        </div>
      </div>
      <el-table stripe :data="templates" size="mini" v-loading="loading" tooltip-effect="light">
        <el-table-column type="index" label="序号" width="80px">
          <template slot-scope="scope">{{scope.$index + 1}}</template>
        </el-table-column>
        <el-table-column label="培养方案模板" min-width="150px" show-overflow-tooltip>
          <template slot-scope="props">{{props.row.name}}</template>
        </el-table-column>
        <el-table-column label="年级">
          <template slot-scope="props">{{props.row.year}}</template>
        </el-table-column>
        <el-table-column label="培养层次">
          <template slot-scope="props">{{props.row.trainingLevel}}</template>
        </el-table-column>
        <el-table-column label="设置状态">
          <template slot-scope="props">
            <el-tag type="success" size="mini" v-if="props.row.siteType == 1">已设置</el-tag>
            <el-tag type="info" size="mini" v-else>未设置</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="toSetRulePage(scope.row)">设置关联</el-button>
            <!-- <router-link :to="'/cultureSchemeRule?id=' + scope.row.id">设置关联</router-link> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-row :gutter="0" class="bg-white">
      <el-col>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handlePageNumChange"
          :current-page="queryForm.pageNum_"
          :page-sizes="[20,50,100,500,1000]"
          :page-size="queryForm.pageSize_"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryForm.total"
          style="float: right;margin:10px 60px 0 0;"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import bus from 'common/src/utils/bus';
import { queryCultureTemplateList } from "common/src/api/culture/bachelor";
import { queryDic, findTrainingLevelByProjId } from "common/src/api/dictionary";
import mixin from 'common/src/mixins/index';
export default {
  name: "CultureSchemeTemplates",
  mixins: [mixin],
  data() {
    return {
      queryForm: {
        year: "",
        trainingLevel: "",
        pageNum_: 1,
        pageSize_: 20,
        total: 0,
        siteType: "",
        formLearning: "",
        name: "",
        projId: "1",
        degreeType: "",
        trainingCategory: "",
        status:"2"

      },
      options: {
        year: [],
        trainingLevel: [],
        siteType: [
          { label: "已设置", value: "1" },
          { label: "未设置", value: "2" }
        ],
        formLearning: [],
        project: [],
        degreeType:[],
        trainingCategory: []
      },
      templates: []
    };
  },
  mounted: function() {
    this.init();
    bus.$on('updateCurrentManageDeptId', (id) => {
        this.queryForm.projId = id;
        this.initTrainingLevelOptions();
        this.onSubmit();
    })
    this.initProjId();
    this.initTrainingLevelOptions();
  },
  methods: {
    initProjId(){
      let currentUser =  this.global.currentUser;
      this.queryForm.projId = currentUser.currentManageDptId;
    },
    initTrainingLevelOptions(){
     
      findTrainingLevelByProjId(this.queryForm.projId).then(res => {
			    if (res.code === 200) {
			        this.queryForm.trainingLevel = "";
			        this.loadTrainingLevelOptions("trainingLevel", res.data);
			    }
			});
    },
    loadTrainingLevelOptions(optionKey, dataObj) {
        this.options[optionKey] = [];
        _.each(dataObj, level => {
            this.options[optionKey].push({
                label:
                    "en" === this.$store.getters.language
                        ? level.nameEN
                        : level.nameCN,
                value: level.code
            });
        });
    },
    toSetRulePage(row) {
      this.$router.push({
        path: "/bclCultureSchemeRule",
        query: { id: row.id, trainingLevel: row.trainingLevel, year: row.year }
      });
    },
    handleSizeChange(val) {
      this.queryForm.pageSize_ = val;
      this.onSubmit();
    },
    handlePageNumChange(val) {
      this.queryForm.pageNum_ = val;
      this.onSubmit();
    },
    initOptions() {
      let params = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_XXXS", "X_GLBM", "X_PYLB",'X_XWLX']
      };
      queryDic(params)
        .then(res => {
          if (res.code == 200) {
            this.fillSelect(res.data);
            this.onSubmit();
          }
        })
        .catch(error => {
          console.log(error);
          this.onSubmit();
        });
    },
    fillSelect(data) {
      this._fill("trainingCategory", data.X_PYLB);
      //this._fill("trainingLevel", data.X_PYCC);
      this._fill("formLearning", data.X_XXXS);
      this._fill("degreeType", data.X_XWLX);
      this._fill("project", data.X_GLBM);
    },
    _fill(type, data) {
      for (let key in data) {
        this.options[type].push({
          value: key,
          label: data[key]
        });
      }
    },
    init() {
      let now = new Date();
      let currentYear = now.getFullYear()+1,
        minYear = currentYear - 5;
      for (let year = currentYear; year > minYear; year--) {
        let obj = { label: year, value: year };
        this.options.year.push(obj);
      }
      this.initOptions();
      this.onSubmit();
    },
    // reset() {
    //   this.queryForm.degreeType="";
    //   this.queryForm.year = "";
    //   this.queryForm.trainingLevel = "";
    //   this.queryForm.grade = "";
    //   this.queryForm.formLearning = "";
    //   this.queryForm.siteType = "";
    //   this.queryForm.trainingCategory = "";
    //   this.onSubmit();
    // },
    reset() {
      this.queryForm.degreeType="";
      this.queryForm.year = "";
      this.queryForm.trainingLevel = "";
      this.queryForm.grade = "";
      this.queryForm.formLearning = "";
      this.queryForm.siteType = "";
      this.queryForm.trainingCategory = "";
      this.queryForm.name = "";
      this.onSubmit();
    },
    onSubmit() {
      this.loading = true;
      queryCultureTemplateList(this.queryForm)
        .then(res => {
          if (res.code == 200) {
            this.templates = res.data.list;
            this.queryForm.total = res.data.total_;
          } else throw res.code;
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          console.log(err);
        });
    }
  },
  created() {},
  watch: {
    '$route' (to) {
      if(to.path=='bclCultureSchemeTemplates'){
        this.onSubmit();
      }
    },
    deep:true
  }
};
</script>
<style lang="scss" scoped>
.div-main {
    margin-bottom: 16px;
  }
</style>